Buttons

Button classes can be applied to both button elements and anchor tags (links). Which element you use depends on what is expected to happen when the element is clicked. Anchor tags should be used when linking to other pages or to another location on the page. Buttons should be used when some sort of action, such as a form being submitted or a Javascript function firing, is triggered on click.

Primary Button

View

Button Link Sample

HTML

<button class="cmp-button
  " type="button">
  Button Sample
</button>
<hr class="util-block util-margin-vert-lg util-display-none@md" style="border: none;">
<a href="#" class="cmp-button
  ">
  Button Link Sample
</a>

Secondary Button

This should only be used when on a dark background.

View

Button Link Sample

HTML

<button class="cmp-button
   cmp-button--border" type="button">
  Button Sample
</button>
<hr class="util-block util-margin-vert-lg util-display-none@md" style="border: none;">
<a href="#" class="cmp-button
   cmp-button--border">
  Button Link Sample
</a>

Narrow Modifier

View

Button Link Sample

HTML

<button class="cmp-button
   cmp-button--narrow" type="button">
  Button Sample
</button>
<hr class="util-block util-margin-vert-lg util-display-none@md" style="border: none;">
<a href="#" class="cmp-button
   cmp-button--narrow">
  Button Link Sample
</a>

Full Width Modifier

View


Button Link Sample

HTML

<button class="cmp-button
   cmp-button--full-width" type="button">
  Button Sample
</button>
<br>
<a href="#" class="cmp-button
   cmp-button--full-width">
  Button Link Sample
</a>

Icon - Left Aligned

View


Button Link Sample

HTML

<button class="cmp-button
   cmp-button--has-icon" type="button">
  Button Sample
  <svg class="cmp-button__icon cmp-button__icon--left">
    <use xlink:href="#icon-arrow-down" />
  </svg>
</button>
<br>
<a href="#" class="cmp-button
   cmp-button--has-icon">
  Button Link Sample
<svg class="cmp-button__icon cmp-button__icon--left">
      <use xlink:href="#icon-arrow-down" />
    </svg>
</a>

Icon - Right Aligned

View


Button Link Sample

HTML

<button class="cmp-button
   cmp-button--has-icon" type="button">
  Button Sample
  <svg class="cmp-button__icon cmp-button__icon--right">
    <use xlink:href="#icon-arrow-down" />
  </svg>
</button>
<br>
<a href="#" class="cmp-button
   cmp-button--has-icon">
  Button Link Sample
<svg class="cmp-button__icon cmp-button__icon--right">
      <use xlink:href="#icon-arrow-down" />
    </svg>
</a>

Color Modifier

You can append any color modifier to change the button color. The text color of the button will adjust automatically to maintain an appropriate contrast ratio.

View

Button Link Sample

HTML

<button class="cmp-button
   cmp-button--olympic" type="button">
  Button Sample
</button>
<hr class="util-block util-margin-vert-lg util-display-none@md" style="border: none;">
<a href="#" class="cmp-button
   cmp-button--olympic">
  Button Link Sample
</a>